<!--
 * @Date: 2020-09-21 17:29:40
 * @LastEditors: 小枫
 * @LastEditTime: 2020-09-25 19:50:05
 * @FilePath: \feng-blog-admin\src\views\ManageArticles.vue
-->
<template lang="pug">
  .manage-user
    el-table(:data='articles', style='width: 100%')
      el-table-column(label='标题')
        template(slot-scope='scope') {{ scope.row.title }}
      el-table-column(label='作者')
        template(slot-scope='scope') {{ scope.row.username }}
      el-table-column(label='分类')
        template(slot-scope='scope')
          el-tag(size='medium') {{ scope.row.tag }}
      el-table-column(label='时间')
        template(slot-scope='scope') {{ scope.row.createAt | formatDate }}
      el-table-column(label='操作')
        template(slot-scope='scope')
          el-button(
            size='mini',
            type='danger',
            @click='handleDelete(scope.$index, scope.row)',
            slot='reference'
            ) 删除
    el-pagination(
      background,
      :pager-count="11",
      :current-page="page",
      layout="prev, pager, next",
      :page-count="allPage",
      @current-change="handleCurrentChange"
      )
</template>

<script>
export default {
  data () {
    return {
      articles: [],
      allPage: null,
      page: 1
    }
  },
  methods: {
    getAllArticle () {
      this.$http.get(`/articles?&page=${this.page - 1}`).then(
        res => {
          if (res) {
            this.articles = res.data.data.articleList
            this.allPage = res.data.data.allPage
            // console.log(this.articles)
          }
        }
      )
    },
    handleCurrentChange (val) {
      this.page = val
      this.getAllArticle()
    },
    deleteArticle (aid) {
      this.$http.delete(`/articles/${aid}`).then(
        res => {
          if (res) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.$router.go(0)
          }
        }
      )
    },
    handleDelete (index, row) {
      this.$confirm('确认删除？')
        .then(_ => {
          this.deleteArticle(row.aid)
        })
        .catch(_ => {})
    }
  },
  created () {
    this.getAllArticle()
  }
}
</script>

<style lang="less" scoped>

</style>
